import styled from 'styled-components'
import Icon from '@/components/Icon'
export const ItemActionWrap = styled.div`
	.action-icons {
		display: flex;
		align-items: center;
		height: 30px;
		box-sizing: border-box;
		span {
			margin: 0 2px;
			&:hover {
				margin: 0;
			}
		}
	}
	.isCalling {
		float: right;
		height: 30px;
		line-height: 30px;
		color: #139641;
		font-size: 14px;
	}
`
export const OperateDropDownWrap = styled.ul`
	width: 130px;
	padding: 6px 0;
	background: #ffffff;
	border: 1px solid #b3bbc3;
	border-radius: 6px;
	ul {
		max-height: 160px;
		overflow-y: auto;
	}
	li {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 32px;
		color: #4e4e4e;
		padding-left: 25px;
		font-size: 12px;
		&:hover {
			background-color: #2c8dc5;
			color: #fff;
			cursor: pointer;
		}
	}
`
interface IconActionProps {
	isOn: boolean
}
/**
 * 哑音
 */
export const IconActionMute = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-58px -2358px` : `-2px -2358px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-84px -2356px` : `-28px -2356px`)};
	}
`
/**
 * 静音
 */
export const IconActionSilence = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-170px -2358px` : `-114px -2358px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-196px -2356px` : `-140px -2356px`)};
	}
`
/**
 * 上传
 */
export const IconActionUpMt = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-674px -2386px` : `-674px -2386px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -700px -2384px;
	}
`
/**
 * 终端信息
 */
export const IconActionMtInfo = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -226px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -252px -2356px;
	}
`
/**
 * 常用终端
 */
export const IconActionOftenMt = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-786px -2386px` : `-730px -2386px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-812px -2384px` : `-756px -2384px`)};
	}
`
/**
 * 互动终端
 */
export const IconActionInteractive = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-730px -2386px` : `-842px -2386px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-756px -2384px` : `-868px -2384px`)};
	}
`
/**
 * 挂断
 */
export const IconActionOnline = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -562px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -588px -2356px;
	}
`
/**
 * 呼叫
 */
export const IconActionOffline = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -674px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -700px -2356px;
	}
`
/**
 * 双流
 */
export const IconActionDoubleFlow = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-338px -2358px` : `-282px -2358px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-364px -2356px` : `-308px -2356px`)};
	}
`
/**
 * 管理方
 */
export const IconActionChairman = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-282px -2386px` : `-226px -2386px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-308px -2384px` : `-252px -2384px`)};
	}
`
/**
 * 终端录像
 */
export const IconActionRec = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -562px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -588px -2384px;
	}
`
/**
 * 自主多画面
 */
export const IconActionMtVmp = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -618px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -644px -2384px;
	}
`
/**
 * 强制广播
 */
export const IconActionForceBrd = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-58px -2541px` : `-2px -2541px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-84px -2539px` : `-28px -2539px`)};
	}
`
/**
 * vip
 */
export const IconActionVip = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-506px -2386px` : `-450px -2386px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-532px -2384px` : `-476px -2384px`)};
	}
`
/**
 * 发言方
 */
export const IconActionSpeaker = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-450px -2358px` : `-394px -2358px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-476px -2356px` : `-420px -2356px`)};
	}
`
/**
 * 终端选看
 */
export const IconActionSelect = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -338px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -364px -2384px;
	}
`
/**
 * 定制混音
 */
export const IconActionMix = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -394px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -420px -2384px;
	}
`
/**
 * 摄像机远遥
 */
export const IconActionCameraRc = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -506px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -532px -2356px;
	}
`
/**
 * 同意参与协作
 */
export const IconActionDcsApply = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -114px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -140px -2384px;
	}
`
/**
 * 拒绝参与协作
 */
export const IconActionDcsRefuse = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -170px -2386px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -196px -2384px;
	}
`
/**
 * 参与协作
 */
export const IconActionDcs = styled(Icon)<IconActionProps>`
	width: 24px;
	height: 24px;
	background-position: ${(props) => (props.isOn ? `-842px -2358px` : `-786px -2358px`)};
	&:hover {
		width: 28px;
		height: 28px;
		background-position: ${(props) => (props.isOn ? `-868px -2356px` : `-812px -2356px`)};
	}
`
/**
 * 删除
 */
export const IconActionDelete = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -730px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -756px -2356px;
	}
`
/**
 * 更多
 */
export const IconActionMore = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -618px -2358px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -644px -2356px;
	}
`
/**
 * kis
 */
export const IconActionKis = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -114px -2541px;
	&:hover {
		width: 28px;
		height: 28px;
		background-position: -140px -2539px;
	}
`
